//生产环境下的webpack配置，主要功能为热切换
const path = require("path");
const webpack = require('webpack');

module.exports = {
	entry: {
		main :'./src/js/index.js'
	},
	output:{
		path: path.join(__dirname,"/src"),
		filename: "bundle.js"
	},
	devServer: {
		contentBase :path.join(__dirname,"/src"),
		open : true,
		port : 9000,
		hot : true,
		inline : true
	},
	module: {
		rules:[
			//babel-loader 针对js文件进行转码，使其能够适合es5和es6
			{
				test: /\.js$/,
				exclude: /node_modules/,
				loader: "babel-loader"
			},
			//处理react的相关内容
			{
				test: /\.jsx$/,
				exclude: /node_modules/,
				loader: "babel-loader"
			},
			//使用css loader和style loader出来css文件
			{
				test: /\.css$/,
				use: [ 'style-loader', 'css-loader' ]
			},
			// 使用 css loader和 style loader 和 sass loader加载scss文件
			{
				test: /\.scss$/,
				use:[ 'style-loader','css-loader','sass-loader'],
			},
			//图片加载
			{
				test: /\.(gif|png|jpe?g|svg)$/i,
				use: [{
						loader: 'file-loader',
						options: {
							name: '[name].[ext]',
							outputPath: 'images/'
						}
					}]
			}
		]
	},
	plugins: [
		new webpack.HotModuleReplacementPlugin()
	]
};